<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<head>
    <title>基础统计</title>
    <div data-th-replace="layout/head-top"></div>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInLeft">
        <div>
            <h4>
                <ol class="breadcrumb">
                    <li>
                        <a href="javascript:void(0)"><i class="fa fa-home"></i> <span>统计</span></a>
                    </li>
                    <li>
                        <strong>基本数据概况</strong>
                    </li>
                </ol>
            </h4>
        </div>
        <div>

            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>基础数据</h5>
                    <div class="pull-right stat-time-filter__wrap">
                        <section class="form-inline">
                            <section class="form-group">
                                <span class="fs14 c-999">时间筛选：</span>
                                <select class="form-control" id="base-time-type">
                                    <option value="1">今日</option>
                                    <option value="5">昨日</option>
                                    <option value="2" selected = "selected">近7天</option>
                                    <option value="3">近30天</option>
                                    <option value="4">自定义</option>
                                </select>
                                <!--今日，近7天，近30天显示格式-->
                                <section class="checkbox ml10 hide time-box">
                                    <span class="fs14 c-333 start-time">2018-12-05</span>
                                    <span class="fs14 c-999"> 至 </span>
                                    <span class="fs14 c-333 end-time">2018-12-11</span>
                                </section>
                                <!--自定义调用日期控件-->
                                <section class="checkbox m-r hide time-input-box">
                                    <input readonly placeholder="开始时间"
                                           id="baseStat"
                                           name="statTimeLaydate"
                                           class="laydate-icon form-control layer-date statTimeLaydate" type="text"/>
                                    <div class="checkbox"><span class="fs12 c-999">至</span></div>
                                    <input readonly placeholder="结束时间"
                                           id="baseEnd"
                                           name="endTimeLaydate"
                                           class="laydate-icon form-control layer-date" type="text"/>
                                </section>
                            </section>
                        </section>

                    </div>
                </div>
                <div class="ibox-content stat-iv-data__wrap stat-data__box">

                    <!--统计模块公共加载状态 开始-->
                    <div class="stat-loading_wrap hide" id="base-stat-loading-box">
                        <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling"><circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#4487f8" stroke-width="2" r="24" stroke-dasharray="113.09733552923255 39.69911184307752"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>
                    </div>
                    <!--统计模块公共加载状态 结束-->

                    <div class="m-l m-r">
                        <section class="row">
                            <section class="iv-data-item">
                                <span class="fs12 c-999">付款金额(元)</span>
                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，所有付款订单金额之和（问答在回答后计入统计）"><i class="fa fa-exclamation-circle"></i></span>
                                <aside class="mt5" id="pay-amount">
                                    <strong class="fs24 c-000 vam" id="amount">--</strong>
                                    <span class="fs14 c-222 vam hide" id="company">万</span>
                                </aside>
                            </section>
                            <section class="iv-data-item">
                                <span class="fs12 c-999">付款订单量(单)</span>
                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，成功付款的订单数量（问答在回答后计入统计）"><i class="fa fa-exclamation-circle"></i></span>
                                <aside class="mt5">
                                    <strong class="fs24 c-000" id="pay-order-count">--</strong>
                                </aside>
                            </section>
                            <section class="iv-data-item">
                                <span class="fs12 c-999">下单人数(人)</span>
                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，成功下订单的数量（问答在回答后计入统计）"><i class="fa fa-exclamation-circle"></i></span>
                                <aside class="mt5">
                                    <strong class="fs24 c-000" id="order-user-count">--</strong>
                                </aside>
                            </section>
                            <section class="iv-data-item">
                                <span class="fs12 c-999">平台转化率(%)</span>
                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，付款人数/访客数(UV)"><i class="fa fa-exclamation-circle"></i></span>
                                <aside class="mt5">
                                    <strong class="fs24 c-000" id="pay-conversion-rate">--</strong>
                                </aside>
                            </section>
                            <section class="iv-data-item">
                                <span class="fs12 c-999">访客数(人)</span>
                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，平台各页面的访问人数，同一访客多次访问会进行去重"><i class="fa fa-exclamation-circle"></i></span>
                                <aside class="mt5">
                                    <strong class="fs24 c-000" id="visitor-count">--</strong>
                                </aside>
                            </section>
                            <section class="iv-data-item">
                                <span class="fs12 c-999">注册人数(人)</span>
                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，平台各渠道成功注册的用户数量"><i class="fa fa-exclamation-circle"></i></span>
                                <aside class="mt5">
                                    <strong class="fs24 c-000" id="reg-count">--</strong>
                                </aside>
                            </section>
                            <section class="iv-data-item">
                                <span class="fs12 c-999">注册率(人)</span>
                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，成功注册的人数/访问网站的总人数UV * 100%"><i class="fa fa-exclamation-circle"></i></span>
                                <aside class="mt5">
                                    <strong class="fs24 c-000" id="reg-rate">--</strong>
                                </aside>
                            </section>
                            <section class="iv-data-item">
                                <span class="fs12 c-999">活跃率(DAU)</span>
                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，登录的用户去重数/总用户数 * 100%"><i class="fa fa-exclamation-circle"></i></span>
                                <aside class="mt5">
                                    <strong class="fs24 c-000" id="ua-rate">--</strong>
                                </aside>
                            </section>
                        </section>
                    </div>

                    <div class="m-t">
                        <div class="row">
                            <section class="col-sm-6">
                                <h6><strong class="c-222">交易趋势</strong></h6>
                                <div style="height: 260px" id="order-statistic-box">

                                </div>
                            </section>
                            <section class="col-sm-6">
                                <h6><strong class="c-222">注册趋势</strong></h6>
                                <div style="height: 260px" id="reg-statistic-box">

                                </div>
                            </section>
                        </div>
                    </div>

                </div>
            </div>

            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>运营概况</h5>
                    <div class="pull-right stat-time-filter__wrap">
                        <section class="form-inline">
                            <section class="form-group">
                                <span class="fs14 c-999">时间筛选：</span>
                                <select class="form-control" id="op-time-type">
                                    <option value="1">今日</option>
                                    <option value="5">昨日</option>
                                    <option value="2" selected = "selected">近7天</option>
                                    <option value="3">近30天</option>
                                    <option value="4">自定义</option>
                                </select>
                                <!--今日，近7天，近30天显示格式-->
                                <section class="checkbox ml10 hide time-box">
                                    <span class="fs14 c-333 start-time">2018-12-05</span>
                                    <span class="fs14 c-999"> 至 </span>
                                    <span class="fs14 c-333 end-time">2018-12-11</span>
                                </section>
                                <!--自定义调用日期控件-->
                                <section class="checkbox m-r hide time-input-box">
                                    <input readonly placeholder="开始时间"
                                           id="opStart"
                                           name="statTimeLaydate"
                                           class="laydate-icon form-control layer-date statTimeLaydate" type="text"/>
                                    <div class="checkbox"><span class="fs12 c-999">至</span></div>
                                    <input readonly placeholder="结束时间"
                                           id="opEnd"
                                           name="endTimeLaydate"
                                           class="laydate-icon form-control layer-date" type="text"/>
                                </section>
                            </section>
                        </section>

                    </div>
                </div>
                <div class="ibox-content stat-iv-data__wrap stat-data__box">

                    <!--统计模块公共加载状态 开始-->
                    <div class="stat-loading_wrap hide" id="op-stat-loading-box">
                        <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling"><circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#4487f8" stroke-width="2" r="24" stroke-dasharray="113.09733552923255 39.69911184307752"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>
                    </div>
                    <!--统计模块公共加载状态 结束-->

                    <div class="transaction-state__wrap">
                        <section class="transaction-state-list__wrap">
                            <section class="transaction-state-item sItem-1">
                                <div class="clearfix mt5">
                                    <section class="iv-data-item">
                                        <span class="fs12 c-999">访客数(人)</span>
                                        <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，平台各页面的访问人数，同一访客多次访问会进行去重" data-original-title="" title=""><i class="fa fa-exclamation-circle"></i></span>
                                        <aside class="mt5">
                                            <strong class="fs24 c-000 vam" id="op-uv">--</strong>
                                        </aside>
                                    </section>
                                </div>
                            </section>
                            <section class="transaction-state-item sItem-2">
                                <div class="clearfix mt5">
                                    <section class="iv-data-item">
                                        <span class="fs12 c-999">下单人数</span>
                                        <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，进入商品详情页点击报名的用户数，点击一次报名按钮就会发起一次下单，一人多次下单记为一人" data-original-title="" title=""><i class="fa fa-exclamation-circle"></i></span>
                                        <aside class="mt5">
                                            <strong class="fs24 c-000 vam" id="op-order-user-count">--</strong>
                                        </aside>
                                    </section>
                                    <section class="iv-data-item">
                                        <span class="fs12 c-999">下单笔数</span>
                                        <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，进入商品详情页点击报名后成功下单的数量之和，点击一次报名按钮就会发起一次下单" data-original-title="" title=""><i class="fa fa-exclamation-circle"></i></span>
                                        <aside class="mt5">
                                            <strong class="fs24 c-000 vam" id="op-order-count">--</strong>
                                        </aside>
                                    </section>
                                    <section class="iv-data-item">
                                        <span class="fs12 c-999">下单金额</span>
                                        <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，发起的订单金额之和（用户点击立即报名按钮为下单，下单后会生成一个待支付订单，下单后会进入付款流程" data-original-title="" title=""><i class="fa fa-exclamation-circle"></i></span>
                                        <aside class="mt5">
                                            <strong class="fs24 c-000 vam" id="op-order-amount">--</strong>
                                        </aside>
                                    </section>
                                </div>
                            </section>
                            <section class="transaction-state-item sItem-3">
                                <div class="clearfix mt5">
                                    <section class="iv-data-item">
                                        <span class="fs12 c-999">付款人数</span>
                                        <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，付款成功的用户数，一个人多次付款记为一个" data-original-title="" title=""><i class="fa fa-exclamation-circle"></i></span>
                                        <aside class="mt5">
                                            <strong class="fs24 c-000 vam" id="pay-user-count">--</strong>
                                        </aside>
                                    </section>
                                    <section class="iv-data-item">
                                        <span class="fs12 c-999">付款订单数</span>
                                        <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，付款成功的订单数量" data-original-title="" title=""><i class="fa fa-exclamation-circle"></i></span>
                                        <aside class="mt5">
                                            <strong class="fs24 c-000 vam" id="op-pay-order-count">--</strong>
                                        </aside>
                                    </section>
                                    <section class="iv-data-item">
                                        <span class="fs12 c-999">付款金额</span>
                                        <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，所有付款订单金额之和" data-original-title="" title=""><i class="fa fa-exclamation-circle"></i></span>
                                        <aside class="mt5">
                                            <strong class="fs24 c-000 vam" id="op-pay-amount">--</strong>
                                        </aside>
                                    </section>
                                    <section class="iv-data-item">
                                        <span class="fs12 c-999">客单价</span>
                                        <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，付款金额/付费用户数" data-original-title="" title=""><i class="fa fa-exclamation-circle"></i></span>
                                        <aside class="mt5">
                                            <strong class="fs24 c-000 vam" id="op-average-amount">--</strong>
                                        </aside>
                                    </section>
                                </div>
                            </section>
                        </section>
                    </div>

                    <!--运营转化漏斗图 开始-->
                    <div class="transaction-state-funnelPlot__wrap">
                        <section class="transaction-state-funnelPlot__pic">
                            <!-- 下单转化率 -->
                            <aside class="transaction-state-num transaction-state-num-1">--</aside>
                            <!-- 平台转化率 -->
                            <aside class="transaction-state-num transaction-state-num-2">--</aside>
                            <!-- 付款转化率 -->
                            <aside class="transaction-state-num transaction-state-num-3">--</aside>
                        </section>
                    </div>
                    <!--运营转化漏斗图 结束-->

                    <!--运营概况曲线图 开始-->
                    <div class="transaction-state-chart__wrap pt10" id="op-statistic-box">
                    </div>
                    <!--运营概况曲线图 结束-->

                </div>
            </div>


        </div>
    </div>
    <div data-th-replace="layout/head-footer"></div>
    <script type="text/javascript" th:src="@{{path}/admin/libs/plugins/echarts/echarts.min.3.0.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/admin/libs/plugins/layer/laydate/laydate.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/admin/business/statistics/time-utils.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/admin/business/statistics/base/base-statistics.js?v={v}(path=${staticPath},v=${v})}"></script>
</body>
</html>
